<template>
  <div class="Institutionalregistration">
    <div class="container">
      <!-- 头部信息 -->
      <Row>
        <Col :xs="24">
          <div class="margin-up-down">
              <Button type="primary" @click="add" class="addButton">             
                <i class = "iconfont icon-add" style="font-size:14px;"></i>
              </Button>      
            </div>
            <div class="margin-up-down">
              <newfourLevelLinkage
                @changeProvince="changeProvince"
                @changeCity="changeCity"
                @changeArea="changeArea"
                :province="province"
                :city="city"
                :area="area"
              ></newfourLevelLinkage>
            </div>
            <div class="margin-up-down">
              <Input v-model.trim="Name" placeholder="机构名称" clearable style="width: 260px" />
            </div>
            <div class="margin-up-down">
                <Button
                  type="primary"                  
                  @click="handleSearch()"
                  class="btn"
                >
                <i class = "iconfont icon-chaxun" style="font-size:14px;margin-right:5px;padding:0"></i></Button>
                <Button @click="reset" class="btn">
                  <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px;"></i>
                </Button>               
            </div>
          
        </Col>
      </Row>
      <!-- 列表 -->
      <div class="list">
        <Table border :loading="tableLoading" :columns="column" :data="list" stripe no-filtered-data-text="未查询到符合条件的记录" style="width:100%"></Table>
      </div>
      <!--分页器-->
      <div class="page">
          <Page :total="pagetotal" :current='pageNo' show-total show-elevator @on-change="pageChange"/>
      </div>
    </div>
    <!-- 删除确认弹框 -->
    <Modal v-model="showDelModal" title="确认删除弹窗" class="drugmanagement-commondrug-list-delModal">
      <p>删除后不可恢复，确认删除所选项吗？</p>
      <div slot="footer">
        <Button class="cancel-btn btn" @click="showDelModal = false">取消</Button>
        <Button class="save-btn btn" type="primary" :loading="delLoading" @click="handleDel">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
// 医疗机构注册
import cookie from "@/utils/cookie.js";
import api from "@/api/commonApi";
import { Page } from "view-design";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
export default {
  components: {
    Page,
    newfourLevelLinkage
  },
  data() {
    return {
      showDelModal: false,
      delLoading: false,
      curRecord: [],
      pageList: [
        {
          value: 5,
          label: 5
        },
        {
          value: 10,
          label: 10
        },
        {
          value: 20,
          label: 20
        },
        {
          value: 50,
          label: 50
        }
      ],
      pageSize: 10,
      totalText: "10",
      pagetotal: 10,
      province: null,
      city: null,
      area: null,
      isBack: 1,
      list: [],
      Name: "",
      pageNo: 1,
      column: [
        {
          title: "排序",
          key: "sum",
          align: "center",
          width: 80,
          render: (h, params) => {
            // let sum = params.row.sum;
            let sum = (this.pageNo-1)*this.pageSize + params.index +1;
            return h("span", sum);
          }
        },
        {
          title: "ID",
          key: "id",
          align: "center",
        },
        {
          title: "机构名称",
          key: "orgName",
          align: "center",
        },
        {
          title: "机构地址",
          key: "hosAddr",
          align: "center",
        },
        {
          title: "机构分类",
          key: "hospitalNature",
          align: "center",
        },
        {
          title: "机构级别",
          key: "gradeName",
          align: "center",
        },
        {
          title: "联系人",
          key: "linkman",
          align: "center",
          render: (h, params) => {
            let row = params.row;
            let name = "";
            let style = {};
            if (Boolean(row.linkman)) {
              name = row.linkman;
            } else {
              name = "暂无";
              style.color = "gray";
            }

            return h(
              "span",
              {
                style
              },
              name
            );
          }
        },
        {
          title: "联系电话",
          key: "linkmanTelephone",
          align: "center",
          render: (h, params) => {
            let row = params.row;
            let name = "";
            let style = {};
            if (Boolean(row.linkmanTelephone)) {
              name = row.linkmanTelephone;
            } else {
              name = "暂无";
              style.color = "gray";
            }

            return h(
              "span",
              {
                style
              },
              name
            );
          }
        },
        {
            title:"状态",
            key:"enable",
            align:"center",
            width:80,
            render:(h, params) => {
                let name =  ['关闭', '入驻'][params.row.enable];
                return h('span',{

                }, name)
            }
        },
        {
          title: "设置",
          align: "center",
          width: 200,
          render: (h, params) => {
            let ipres = params.row.ipres;
            let row = params.row;
            let name = row.enable == '0'? '启用' :'停用';
            return h("div", [
              h(
                "span",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                      color: '#5362e1',
                      margin: "0px 6px"
                  },
                  on: {
                    click: () => {
                      this.edit(row);
                    }
                  }
                },
                "编辑"
              ),
              '|',
              h(
                "span",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                      color: '#21c780',
                      margin: "0px 6px"
                  },
                  on: {
                    click: () => {
                      this.details(row);
                    }
                  }
                },
                "详情"
              ),
              // '|',
              // h('span', {
              //     props: {
              //         size: "small",
              //         type: "primary"
              //     },
              //     style: {
              //         color: '#ff9966',
              //         margin: "0px 6px"
              //     },
              //     on:{
              //         click: () => {
              //             this.enable(row)
              //         }
              //     }
              // }, name),
              ipres == null &&
              '|',
              ipres == null &&
              h(
                "span",
                {
                  props: {
                    size: "small",
                    type:"error"
                  },
                  style: {
                      color: '#fc6c49',
                      marginLeft: "6px"
                  },
                  on: {
                    click: () => {
                      this.delete(row);
                    }
                  }
                },
                 "删除"
              )
            ]);
          }
        }
      ],
      tableLoading: false
    };
  },
  watch: {
    pageSize(nv, ov) {
      this.getMechanismreg();
    }
  },
  created() {
    this.province = this.$route.query.province
      ? parseInt(this.$route.query.province)
      : null;
    this.city = this.$route.query.city
      ? parseInt(this.$route.query.city)
      : null;
    this.area = this.$route.query.area
      ? parseInt(this.$route.query.area)
      : null;
    this.isBack = this.$route.query.isBack
      ? parseInt(this.$route.query.isBack)
      : 1;
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/maintain/indexManagement/index",
        title: "索引管理"
      },
      {
        path: "/index/maintain/mechanismreg/list",
        title: "医疗机构注册"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    let pageNo = this.$route.query.pageNo;
    if (pageNo) {
      this.pageNo = parseInt(pageNo);
    }
    this.getMechanismreg();
  },
  methods: {
    reset() {
      this.pageNo = 1
      this.Name = "";
      if (cookie.getCookie("idtt") === '2' || cookie.getCookie("idtt") === '3') {
      } else {
        this.province = null;
        this.city = null;
      }
      this.area = null;
      this.getMechanismreg();
    },
    handleSearch() {
      this.pageNo = 1;
      this.getMechanismreg()
    },
    select(name) {
      if (name == "全部") {
        this.MenuText = "全部";
      } else if (name == "未开通") {
        this.MenuText = "未开通";
      } else if (name == "已开通") {
        this.MenuText = "已开通";
      } else if (name == "已关闭") {
        this.MenuText = "已关闭";
      }
    },
    changeProvince(val) {
      this.province = val;
    },
    changeCity(val) {
      this.city = val;
    },
    changeArea(val) {
      this.area = val;
    },
    //停用/启用
    enable(item) {
      let id = item.id;
      let enable = 0;
      if (!item.enable) {
          enable = 1;
      }
      this.$axios
          .post(api.mechanismregEnable, {
              enable,
              id
          })
          .then(res => {
              if (res.data.code) {
                  let ret = res.data.object;
                  item.enable = enable;
                  this.$Message.info("修改成功");
              }
          });
    },
    // 详情页面
    details(item) {
      let id = item.id;
      this.functionJS.queryNavgationTo(
        this,
        "/index/organizat/mechanismreg/details",
        {
          id,
          pageNo: this.pageNo,
          province: this.province,
          city: this.city,
          area: this.area,
          isBack: 2
        }
      );
    },
    // 删除此条数据
    delete(item) {
      let id = item.id;
      this.curRecord = [id];
      this.showDelModal = true;
    },
    handleDel() {
      this.delLoading = true;
      this.$axios
        .post(api.deleteController, this.curRecord)
        .then(res => {
          this.delLoading = false;
          if (!res.data.code) {
            this.$Message.error(res.data.object[0]);
            return false;
          }
          this.$Message.success("删除成功");
          this.showDelModal = false;
          this.getMechanismreg();
        })
        .catch(res => {
          this.delLoading = false;
        });
    },
    // 批量导入
    batch() {
      this.functionJS.queryNavgationTo(
        this,
        "/index/maintain/mechanismreg/batchone",
        {
          pageNo: this.pageNo,
          province: this.province,
          city: this.city,
          area: this.area,
          isBack: 2
        }
      );
    },
    pageChange(index) {
      this.pageNo = index;
      this.getMechanismreg();
    },
    // 新增机构
    add() {
      this.functionJS.queryNavgationTo(
        this,
        "/index/organizat/mechanismreg/add",
        {
          pageNo: this.pageNo,
          province: this.province,
          city: this.city,
          area: this.area,
          isBack: 2
        }
      );
    },
    // 编辑机构
    edit(item) {
      let id = item.id;
      this.functionJS.queryNavgationTo(
        this,
        "/index/organizat/mechanismreg/edit",
        {
          id,
          pageNo: this.pageNo,
          province: this.province,
          city: this.city,
          area: this.area,
          isBack: 2
        }
      );
    },
    getMechanismreg() {
      let body = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      };
      if (this.Name != "") {
        body.orgName = this.Name.trim();
      }
      body.provinceCode = this.province ? this.province : null;
      body.cityCode = this.city ? this.city : null;
      body.districtCode = this.area ? this.area : null;
      body.hospitalType = 1;
      this.tableLoading = true;
      this.$axios.post(api.mechanismregList, body).then(res => {
        this.tableLoading = false;
        if (res.data.code) {
          let ret = res.data.object;
          this.pagetotal = ret.total;
          if(ret.records){
            ret.records.forEach((item, index) => {
              item.sum = this.addZeros(index);
            });
            this.list = ret.records;
            // sessionStorage.setItem("list", JSON.stringify(this.list));
          } else {
            this.list = []
          }
          
        } else {
          this.$Message.info("不允许访问");
        }
      }).catch(() => {
        this.tableLoading = false;
      });
    }
  },
};
</script>
<style lang="less" scoped>
.Institutionalregistration {
  width: 100%;
  margin: 0 auto;
  padding: 10px; 
  background: #ffffff;
  box-sizing: border-box;
  .container {
    width: 100%;
    margin: 0 auto;
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .btn {
        width: 51px;
        height: 32px;
    }
    .addButton{
      border: 1px solid #21c780;
      background-color: #21c780;
    }
    .page{
      text-align: center;
    }
    .list {
      width: 100%;
      margin: 10px 0;
    }
  }
}
.drugmanagement-commondrug-list-delModal {
  /deep/ .ivu-modal-wrap {
    .btn {
      width: 80px;
    }
  }
}
</style>